<template>
  <div class="proxy-test-event">
    <h1>{{ message }}</h1>
    <p>早期开发中主要是指后端路由，之后逐渐出现前端路由的概念。</p>
    <p>后端路由：主要是由浏览器输入地址不同，呈现的内容不同。特点是安全性好，有利于SEO搜索，但是对于开发容易产生冗余代码，对于用户来说频繁刷新页面也不友好。</p>
    <p>前端路由：特点交互上给用户体验比较好，但是不利于SEO搜索</p>
    <h3>简单实现前端路由</h3>
    <ol>
      <li>hash</li>
      <li>history API</li>
    </ol>
    <section>
      <h3>1、hash</h3>
      <p>早期的路由是由location.hash实现的，location.hash的值是url 井号以后的值。</p>
      <ul>
        <li>location.hash不会被发送到后端，是浏览器的一个行为。</li>
        <li>每次改变hash都会产生一个记录，因此可以动过浏览器的前进后退来来查看历史。</li>
        <li>我们可以用onhashchange来监听hash值的变化。用location.hash来直接获取井号以及以后的值。</li>
      </ul>
      <p>例如</p>
      <code>
        <pre>
          location.hash = 'hash';
          // 或
          &lt;a href="#hash"&gt;hash&lt;/a&gt;
          window.addEventListener('hashchange', () => {
            console.error('hash 产生了变化');
            console.error(location.hash);
          });
        </pre>
      </code>
    </section>
    <section>
      <h3>2、history API</h3>
      <p>hash的方法兼容性比较好，但有些影响美观，HTML5的提供了history API来实现URL的变化主要有：history.pushState() 和 history.repalceState()来改变history。</p>
      <ul>
        <li>和hash一样，可以改变地址，但不会进行刷新浏览器</li>
        <li>直接改变了history，也可以用浏览器前进后退查看历史</li>
        <li>当用户触发浏览器前进后退或者调用history.back()/history.forward()时候会触发popstate，但history.pushState()或history.replaceState()不回去触发popstate</li>
      </ul>
      <code>
        <pre>
          let state = {page: 1};
          window.history.pushState(state, 'title', "http://tangcusuan.com");
        </pre>
      </code>
      <ul>
        <li>第一个参数是状态对象：是一个状态对象，可以在popstate获取到，但是序列化后不能大于640k，否则该方法会抛出异常</li>
        <li>第二个参数是标题：是一个字符串，目前Firefox会忽略这个参数。</li>
        <li>第三个参数是地址：是一个新的URL的地址</li>
      </ul>
      <p>repalceState()参数和pushState()一致，不同点在于pushState是新增一个历史，repalceState是替代现在的地址。</p>
      <code>
        <pre>
          window.onpopstate = function(event) {
            alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
          };
        </pre>
      </code>
    </section>
    <h3>总结</h3>
    <p>1、hash兼容性好。history API先对比较美观</p>
    <p>2、hash只不会被发送到后端因此直接用就可以，history API 需要服务端做一些相关操作</p>
    <code>
      <pre>
        // hash 以下都会指向index.html
        https://www.tangcusuan.com
        https://www.tangcusuan.com#home

        // 需要服务端把一下地址都重定向到index.html
        https://www.tangcusuan.com
        https://www.tangcusuan.com/home
      </pre>
    </code>
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component({
        // 所有的组件选项都可以放在这里
    })
    export default class router extends Vue {
        // data 在这
        message: string = '前端路由的实现'
    }
</script>
<style lang="scss">
.proxy-test-event{
}
</style>